<template>
  <div class="testResult">
    <el-drawer title="我是标题" :visible.sync="drawerVisible" size="1000px" :with-header="false">
      <div class="drawerForm">
        <div class="pageTitle">
          <div class="titleText">文件规则检查结果</div>
        </div>
        <el-scrollbar class="content">
          <div ref="exportContent" style="height: 100%; padding: 0 32px">
            <div class="item">
              <div class="itemContent">
                <div>
                  <span>检查文件：</span>
                  <span class="fontBold file" @click="handleClick('download')">
                    {{ formData.chipDefinitionFiles?.[0]?.name }}
                  </span>
                </div>
                <div>
                  <span>检查结果：</span>
                  <span class="tag tagFail">未通过</span>
                </div>
                <div>
                  <span>检查规则集：</span>
                  <span class="fontBold file" @click="handleClick('ruleSet')">{{ ruleSetName }}</span>
                </div>
              </div>
            </div>
            <div class="divider"></div>

            <div class="item">
              <div class="title">检查失败规则</div>
              <el-table
                :data="formData.notPassDataList"
                :header-cell-style="{
                  background: '#F7F8FA',
                  color: '#333',
                  'border-bottom': 'none'
                }"
              >
                <el-table-column prop="ruleName" width="120" label="规则名称"></el-table-column>
                <el-table-column prop="outputInfo" label="输出信息"></el-table-column>
              </el-table>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </el-drawer>
    <fileRuleSetDetail
      v-if="showRuleSetDetail"
      ref="fileRuleSetDetail"
      type="file"
      :conditional-relation-option="conditionalRelationOption"
      :variable-model-option="variableModelOption"
      :fact-mode-to-comparator-option="factModeToComparatorOption"
      @close="handleClose"
    />
  </div>
</template>

<script>
import { downLoadFile, fileDownload } from '@/utils/download.js'
import defaultSettings from '@/settings'
import { generateUUID, postMessage, receivedMessage } from '@/utils/index'
import fileRuleSetDetail from '@/views/rule-management/components/fileRuleSetDetail.vue'
import {
  getConditionalRelationOptionList,
  getFactModeToComparatorOptionList,
  getModelOptionList
} from '@/api/rule-management'
export default {
  name: 'TestResult',
  components: { fileRuleSetDetail },
  data() {
    return {
      drawerVisible: false,
      formData: {
        roleId: null,
        roleName: '',
        rightIds: []
      },
      ruleSetName: '',
      conditionalRelationOption: [],
      variableModelOption: [],
      factModeToComparatorOption: [],
      loading: false,
      showRuleSetDetail: false,
      ruleSetId: null,
      downloadRequestId: generateUUID(),
      getConditionalRelationOptionListRequestId: generateUUID(),
      getModelOptionListRequestId: generateUUID(),
      getFactModeToComparatorOptionListRequestId: generateUUID()
    }
  },
  mounted() {
    receivedMessage(this.dataHandle)
  },
  methods: {
    dataHandle(result) {
      let self = this
      let e = defaultSettings.isWPF ? result : { data: JSON.parse(result) }
      if (e.data.webInfo.requestId === self.downloadRequestId) {
        let res = e.data.response
        if (res.success) {
          var bytes = new Uint8Array(
            window
              .atob(res.data)
              .split('')
              .map(function (c) {
                return c.charCodeAt(0)
              })
          )
          res.data = bytes
          fileDownload(res)
        } else {
          self.$message.error(res.message)
        }
      } else if (e.data.webInfo.requestId === self.getConditionalRelationOptionListRequestId) {
        self.conditionalRelationOption = e.data.response.data
      } else if (e.data.webInfo.requestId === self.getModelOptionListRequestId) {
        self.variableModelOption = e.data.response.data.parameterModelDataList
      } else if (e.data.webInfo.requestId === self.getFactModeToComparatorOptionListRequestId) {
        self.factModeToComparatorOption = e.data.response.data
      }
    },
    is(currentRow) {
      this.formData = currentRow
      if (currentRow.notPassDataList.length > 0) {
        this.ruleSetId = currentRow.notPassDataList[0].ruleSetId
        this.ruleSetName = currentRow.notPassDataList[0].ruleSetName
      }
      this.getConditionalRelationOptionList()
      this.getModelOptionList()
      this.getFactModeToComparatorOptionList()
      this.drawerVisible = true
    },
    getConditionalRelationOptionList() {
      if (defaultSettings.isWPF) {
        this.getConditionalRelationOptionListRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/ruleSet/getConditionalRelationOptionList',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: {},
          WebInfo: {
            requestId: this.getConditionalRelationOptionListRequestId
          }
        }
        if (defaultSettings.isOnlineWpf) {
          parent.postMessage(message, '*')
        } else {
          window.chrome.webview.postMessage(message)
        }
      } else {
        getConditionalRelationOptionList().then((res) => {
          this.conditionalRelationOption = res.data
        })
      }
    },
    getModelOptionList() {
      if (defaultSettings.isWPF) {
        this.getModelOptionListRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/ruleSet/getModelOptionList',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: {},
          WebInfo: {
            requestId: this.getModelOptionListRequestId
          }
        }
        if (defaultSettings.isOnlineWpf) {
          parent.postMessage(message, '*')
        } else {
          window.chrome.webview.postMessage(message)
        }
      } else {
        getModelOptionList().then((res) => {
          this.variableModelOption = res.data.parameterModelDataList
        })
      }
    },
    getFactModeToComparatorOptionList() {
      if (defaultSettings.isWPF) {
        this.getFactModeToComparatorOptionListRequestId = generateUUID()
        let message = {
          RequestUrl: process.env.VUE_APP_URL + '/ruleSet/getFactModeToComparatorOptionList',
          RequestMethod: 'POST',
          Headers: {
            contentType: 'application/json'
          },
          QueryParameter: {},
          RequestBody: {},
          WebInfo: {
            requestId: this.getFactModeToComparatorOptionListRequestId
          }
        }
        if (defaultSettings.isOnlineWpf) {
          parent.postMessage(message, '*')
        } else {
          window.chrome.webview.postMessage(message)
        }
      } else {
        getFactModeToComparatorOptionList().then((res) => {
          this.factModeToComparatorOption = res.data
        })
      }
    },
    handleClose() {
      this.showRuleSetDetail = false
    },
    handleClick(name) {
      if (name === 'download') {
        if (defaultSettings.isWPF || defaultSettings.isCEF) {
          this.downloadRequestId = generateUUID()
          let message = {
            RequestUrl: process.env.VUE_APP_URL + '/files/download',
            RequestMethod: 'POST',
            Headers: {
              contentType: 'application/json'
            },
            QueryParameter: {},
            RequestBody: {
              files: [
                {
                  fileName: this.formData.chipDefinitionFiles[0].name,
                  path: this.formData.chipDefinitionFiles[0].url
                }
              ]
            },
            WebInfo: {
              requestId: this.downloadRequestId
            }
          }
          postMessage(message)
        } else {
          downLoadFile(
            process.env.VUE_APP_BASE_API + this.formData.chipDefinitionFiles[0].url,
            this.formData.chipDefinitionFiles[0].name
          )
        }
      } else if (name === 'ruleSet') {
        this.showRuleSetDetail = true
        this.$nextTick(() => {
          this.$refs.fileRuleSetDetail.is('view2', { ruleSetId: this.ruleSetId })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/styles/element-variables.scss';

.testResult {
  height: 100%;
  .fontBold {
    font-weight: bold;
    &.file {
      cursor: pointer;
      text-decoration: underline;
      &:hover {
        color: $--color-primary;
      }
    }
  }

  .drawerForm {
    display: flex;
    flex-direction: column;
    height: 100%;
    .content {
      flex: 1;
      font-size: 14px;

      // overflow-y: auto;
      .divider {
        border: 1px dashed #b9c8dc;
        margin-bottom: 24px;
      }
      .item {
        margin-bottom: 20px;
        .title {
          font-weight: bold;
          margin-bottom: 20px;
          color: #333333;
          line-height: 16px;
        }
        .executeInfo {
          margin-bottom: 20px;
          span {
            margin-right: 50px;
          }
        }
        .roundTitle {
          font-weight: bold;
          color: #333333;
          margin-bottom: 20px;
          margin-top: 20px;
        }
        .firstRoundTitle.roundTitle {
          margin-top: 5px;
        }
        .itemContent {
          display: flex;
          font-size: 14px;
          flex-wrap: wrap;
          > div {
            margin-right: 80px;
            line-height: 25px;
            .tag {
              border-radius: 12px;
              opacity: 1;
              font-weight: 500;
              color: #ffffff;
              font-size: 12px;
              // width: 56px;
              padding: 0 10px;
              height: 22px;
              line-height: 22px;
              display: inline-block;
              text-align: center;
            }
            .tagSuccess {
              background-color: #44ae74;
            }
            .tagFail {
              background-color: #ff0000;
            }
          }
        }
      }
    }
  }

  .pageTitle {
    padding: 27px 32px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .titleText {
      display: inline;
      padding-right: 20px;
      padding-left: 5px;
    }
  }
}
</style>
